<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css" type="text/css">
    <link rel="stylesheet" href="../css/screen.css" type="text/css">
    <link rel="stylesheet" href="../css/register.css" type="text/css">
    <style>
    </style>
</head>
<body>
<header>注册</header>
<div class="reg_wrap">
    <h2>集家网，舒适系统高端服务商</h2>
    <section>
        <form class="reg_form" action="">
            <ul>
                <li>
                    <input type="text" class="address field" placeholder="请输入小区名及门牌号"/>
                </li>
                <li>
                    <input type="text" class="mobile field" placeholder="请输入手机号"/>
                </li>
                <li>
                    <input type="text" class="sms field" placeholder="请输入短信验证码"/>
                    <button class="get_sms" type="button">获取</button>
                </li>
                <li>
                    <input type="text" class="verify field" placeholder="请输入验证码"/>
                    <img class="verify_img" src="../images/verify_code.jpg" alt=""/>
                    <a class="change_code" href="javascript:void(0)">看不清?换一张</a>
                </li>
                <li>
                    <button class="regBtn" type="button">注册</button>
                </li>
            </ul>
        </form>
        <img src="../images/reg_sub.jpg" alt="" class="reg_sub"/>
    </section>
</div>
<div class="ui_mask"></div>
<div class="reg_success">
    <img src="../images/ok.png" alt=""/>
    恭喜您完成注册
</div>
</body>
<script src="../script/zepto.min.js"></script>
<script>
    $(function () {
        var mobileRegExp=new RegExp("^0?(13|15|18|14)[0-9]{9}$")
        $('.regBtn').click(function () {
            var regFlag=true;
            $('.field').each(function () {
                var val= $.trim($(this).val());
                if(val==""){
                    $(this).addClass('warning');
                    regFlag=false;
                }else{
                    if($(this).hasClass('mobile')){
                        if(!mobileRegExp.test(val)){
                            alert("请输入正确的手机号码");
                            $(this).addClass("warning");
                            regFlag=false;
                        }
                    }
                }
            })
            if(regFlag){
               $('.ui_mask').addClass('ui_show');
               $('.reg_success').addClass('reg_success_show');

            }
        })

        //获取验证码
        $('.get_sms').click(function () {
            if($.trim($('.mobile ').val()=="")){
                $('.mobile').addClass('warning')
            }
        });


        $('.field').focus(function () {
            $(this).removeClass('warning');
        })
        $('.ui_mask').on('click', function () {
            $(this).removeClass('ui_show');
            $('.reg_success').removeClass('reg_success_show');
            $('.reg_form input').val("");
        })

    })
</script>
</html>